<template>
    <div style="display: flex; text-align: right; font-size: 12px; line-height: 60px">
        <!-- 用户信息  -->
        <div style="flex: 1; text-align: left; font-size: 20px">
            <span style="cursor: pointer" :class="collapseButtonClass" @click="collapse"></span>
        </div>
        <el-dropdown style="width: 120px; cursor: pointer">
        <span>
          <img :src="user.avatar ? user.avatar : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" class="avatar" alt="">
          <span>{{ user.nickName }}</span><i class="el-icon-arrow-down" style="margin-left: 6px"></i>
        </span>
            <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center; font-size: 18px">
                <router-link to="/person" style="text-decoration: none">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                </router-link>
                <el-dropdown-item>
                    <el-link :underline="false" @click="logout" style="width: 100%; font-size: 8px">退出登录</el-link>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
    export default {
        name: "Header",
        props: {
            collapseButtonClass: String,
            collapse: Function,
            user: Object
        },
        methods: {
            logout () {
                this.$store.commit('logout')
                this.$message.info('登录已退出，请重新登录!')
            }
        }
    }
</script>

<style scoped>
    img.avatar {
        /*background-color: pink; */
        position:relative;
        top: 9px;
        width: 30px;
        margin-right: 8px;
        border-radius: 15px
    }
</style>